<template>
  <section  class="redPacketUtil" id="packetEndFn"  ref="redPacketWrap">
    <div class="close" @click="packetEndFn()"></div>
    <img class="redPacket" 
    @click="getPacket()"
    v-for="(item, index) in packetNum" :key="index" 
    :style="{animationDelay: delayFn(), left: leftRemFn(), animationPlayState: showModel?'paused':'running'}"
    src="../../../assets/images/petal.jpg" alt="">
    <div class="model" ref="model" :style="{display: showModel?'block':'none'}">
        <div class="hb">
            <div class="text">{{packetText}}</div>
            <div class="btn" v-if="btnBool" @click="closeFn()">继续抢红包</div>
            <div class="btn" v-if="!btnBool" @click="closePacketFn">确定</div>
        </div>
    </div>
  </section>
</template>
<script>
import reqApis from "../../../req/reqApis.js";
export default {
  props: {
    obj: {
      type: Object
    },
    anchorConfigObj: {
      type: Object
    }
  },
  data () {
    return {
      totalMoney: 0,
      packetNum: 10,
      packetText: "",
      showModel: false,
      btnBool: true,
    }
  },
  created(){
    
  },
  mounted() {

  },
  methods: {
    closePacketFn() {
      this.$emit("closePacketFn");
    },
    packetEndFn(){
      this.packetBool = false;
      this.showModel = true;
      this.packetText = '总共抢到了' + this.totalMoney.toFixed(2);
      this.btnBool = false;
    },
    closeFn() {
      this.showModel = false;
    },
    getPacket() {
      let params = {
          redPacketConfigCode: this.anchorConfigObj.redPacketConfigCode
      }
      reqApis.getRedPacketApi(params).then(res => {
        console.log("res", res.data);
        this.packetText = res.data.msg;
        this.totalMoney += Number(res.data.price);
        
      }).catch(err => {
        console.log("err", err.data);
         this.packetText = err.data.msg;
      })
      this.showModel = true;

    },
    leftRemFn() {
      let leftRem = this.ranNum(10, 355) * 0.01;
      return leftRem + 'rem'; 
    },
    delayFn() {
      let delay = this.ranNum(0, 100) / 10;
      return delay+"s";
    },
    ranNum(min, max) {
        return Math.ceil(Math.random() * (max - min) + min);
    },
    // close() {
    //   this.$emit("closeFn");
    // }
  },
}
</script>
<style lang="less" scoped>
.redPacketUtil {
  background: black;
  opacity: 0.8;
  position: absolute;
  width: 3.75rem;
  height: 100%;
  .close {
    width: .4rem;
    height: .4rem;
    position: absolute;
    background: url("../../../assets/images/clear-icon-1.png") no-repeat center;
    background-size: cover;
    right:0;
  }
  .model {
    .hb {
       width: 3rem;
        height: 4.5rem;
        border-radius: .2rem;
        background-color: #e7223e;
        color: #fad755;
        position: fixed;
        left: 0.37rem;
        top: 1.5rem;
        font-size: .3rem;
        font-weight: 900;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .btn {
          background-color: #fad755;
          color: #e7223e;
          font-size: 18px;
          margin-top: 10px;
          padding: 10px;
          border: none;
          outline: none;
          cursor: pointer;
        }
    }
  }
  .redPacket {
    width: 0.3rem;
    
  }
  img {
        position: absolute;
        transform: translateY(-100%);
        /*下落动画*/
        animation: dropDowm 8s forwards;
        /*旋转动画*/
    }
    @keyframes dropDowm {
        0% {
            top: 0px;
            transform: translateY(-100%) rotate(0deg);
        }

        100% {
            top: 110%;
            transform: translateY(0%) rotate(360deg);
        }
    }
}

</style>

